A segmented Meter chart

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.meter.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="450">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var meter = new RGraph.Meter({
            id: 'cvs',
            min: 0,
            max: 100,
            value:75,
            options: {
                adjustable: true,
                anglesStart: RGraph.PI - 0.55,
                anglesEnd: RGraph.TWOPI + 0.5,
                centery: 300,
                linewidthSegments: 15,
                textSize: 22,
                textColor: 'black',
                greenColor: '#0a0',
                segmentRadiusStart: 175,
                border: false,
                textAccessible: false,
                strokestyle: 'white',
                tickmarksSmallNum: 0,
                tickmarksBigNum: 0,
                needleRadius: 150,
                needleColor: 'gray',
                textValign: 'bottom',
                centerpinFill: 'white',
                centerpinStroke: 'gray',
                colorsRanges: [
                    [0,10,'Gradient(#f00:#f00:#c00:#300)'],
                    [10,20,'Gradient(#ffa:#ff0:#cc0:#330)'],
                    [20,30,'Gradient(#ffa:#ff0:#cc0:#330)'],
                    [30,40,'Gradient(#afa:#0f0:#0c0:#030)'],
                    [40,50,'Gradient(#afa:#0f0:#0c0:#030)'],
                    [50,60,'Gradient(#afa:#0f0:#0c0:#030)'],
                    [60,70,'Gradient(#afa:#0f0:#0c0:#030)'],
                    [70,80,'Gradient(#afa:#0f0:#0c0:#030)'],
                    [80,90,'Gradient(#afa:#0f0:#0c0:#030)'],
                    [90,100,'Gradient(#afa:#0f0:#0c0:#030)']
                ]
            }
        }).draw();
    };
</script>